
<?php $this->load->view('datan/chart_header');?>
    <style>
        .main {
            height: <?php echo $_GET['height'] ? intval($_GET['height']) : 400?>px;
            overflow: hidden;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #e3e3e3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        }
    </style>
    <script src="../public/Lib/echarts-2.2.7/build/dist/echarts-all.js"></script>
    <script type="text/javascript" src="<?php echo URLPRE;?>static/public/Lib/Kalendajs/build/kalendae.standalone.js"></script>
    <link href="<?php echo URLPRE;?>static/public/Lib/Kalendajs/build/kalendae.css" rel="stylesheet" />
    <link href="<?php echo URLPRE;?>static/admin/css/admin_full.css" rel="stylesheet" />
    <div style="padding:15px 0;<?php if($_GET['ifr']){echo 'display:none';}?>">
        <form method="post" action="">
            <table width="100%" border="0">
                <tbody>
                <tr>
                    <td></td>
                    <td><input type="text" readonly value="<?php echo $condition['startdate']?>" placeholder="开始日期" class="input rounded" style="height: 28px;" name="start_date" id="Kalendae1" />~
                        <input type="text" readonly value="<?php echo $condition['enddate']?>" placeholder="结束日期" class="input rounded" style="height: 28px;" name="end_date" id="Kalendae2" />&nbsp;&nbsp;
                        <select name="type">
                            <option value="0" <?php if($condition['type']==0)echo 'selected';?>>总量</option>
                            <option value="2" <?php if($condition['type']==2)echo 'selected';?>>PC端</option>
                            <option value="6" <?php if($condition['type']==6)echo 'selected';?>>移动端</option>
                            <option value="1" <?php if($condition['type']==1)echo 'selected';?>>线下</option>
                        </select>
                        <input type="submit" class="btn" value="确定">
                </tr>
                </tbody>
            </table>
        </form>

    </div>

    <div class="main" id="main1" style="height:<?php echo $_GET['height'] ? intval($_GET['height']) : 400?>px;"></div>

    <script>

        var kal_dae1 = new Kalendae.Input('Kalendae1', {
            months:1,
            mode:'single',
            format:'YYYY-MM-DD'
        });
        var kal_dae2 = new Kalendae.Input('Kalendae2', {
            months:1,
            mode:'single',
            format:'YYYY-MM-DD'
        });
        var myChart = echarts.init(document.getElementById('main1'));

        var option = {
            <?php if(!$_GET['ifr']){?>
            dataZoom : {
                show : true,
                realtime : true,
                //orient: 'vertical',   // 'horizontal'
                //x: 0,
//            y: 36,
                //width: 400,
                height: 20,
                backgroundColor: 'rgba(221,160,221,0.5)',
                dataBackgroundColor: 'rgba(138,43,226,0.5)',
                fillerColor: 'rgba(38,143,26,0.6)',
                handleColor: 'rgba(128,43,16,0.8)',
                //xAxisIndex:[],
                //yAxisIndex:[],
                start : 50,
                end : 100
            },
            <?php }?>
            title : {
                text: '<?php echo $title?>'
            },
            theme:'infographic',
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:['订单金额','已支付金额']
            },
            toolbox: {
                show : true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    name : '日期',
                    data : ['<?php echo implode('\',\'', $date_array)?>']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '金额',
                    axisLabel : {
                        formatter: '{value}元 '
                    }
                }
            ],
            series : [
                {
                    name:'订单金额',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[<?php echo implode(',', $y_list1)?>]
                },
                {
                    name:'已支付金额',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[<?php echo implode(',', $y_list2)?>]
                }
            ]
        };

        myChart.setOption(option);
    </script>
<?php $this->load->view('datan/chart_footer');?>